<template>
  <lay-form-item prop="avatar">
    <lay-avatar :src="imgurlss" radius class="avatar" style="margin-left: -10px;"></lay-avatar>
  </lay-form-item>
  <lay-form-item prop="imgurl">    
    <lay-col v-show="false">
      <lay-input v-model="imgurl"></lay-input>
    </lay-col>
    <lay-upload @done="getUploadFile" :url="uploadConfig.uploadUrl" field="File" :data="uploadConfig.uploadUser"
      :headers="uploadConfig.uploadHeaders" acceptMime="image/png, image/jpeg">
      <template v-slot:default="params">
        <lay-button type="normal" v-permission="PerKey.User_UserChangeEdit">上传头像</lay-button>
      </template>
    </lay-upload>
  </lay-form-item>
</template>

<script lang="ts">
import { defineComponent, ref, watch, defineEmits } from "vue";
import { PerKey } from "../../library/permissionConst"
export default defineComponent({
  name: "UploadAvatar",
}) 
</script>
 
<script lang="ts" setup>
import { uploadConfig } from "../../api/upload"
import { layer } from "@layui/layer-vue";

interface UploadProps {
  modelValue: String,
}
const emit = defineEmits(["update:modelValue"])

const props = withDefaults(defineProps<UploadProps>(), {
  modelValue: String,
});

const imgurl = ref(props.modelValue)
let imgurlss = ref()

const getUploadFile = (res: any) => {
  let up = JSON.parse(res.data)
  if (up.status == 1) {
    layer.msg(up.msg)
    emit('update:modelValue', up.data.url)
  } else {
    layer.msg(up.error)
  }
};

watch(
  () => props.modelValue,
  (value) => {
    imgurl.value = value;
    imgurlss.value = uploadConfig.hostURL + value
    //console.log(value)
  },
)
</script>
<style scoped>

  .avatar {
      width: 120px;
      height: 120px;
  }
  </style>